<template>
    <div class="flex-col justify-start page">
        <div class="flex-col justify-start section_3">
            <div class="flex-col justify-start items-start relative section">
                <div class="flex-col section_4 ">
                    <div class="flex-col self-stretch">
                        <div class="flex-row items-center group">
                            <img class="image"
                                src="https://ide.code.fun/api/image?token=67bd4fee797f850011f9d0f7&name=08998bcf18104dc167749257d20f9523.png" />
                            <div class="flex-col items-start group_2 ml-6">
                                <span class="text">智交乐学</span>
                                <div class="group_3 mt-6">
                                    <span class="font_2 text_3">SWJTU</span>
                                    <span class="font_2 text_4">Online</span>
                                </div>
                            </div>
                        </div>
                        <div class="flex-row mt-9-5">
                            <img class="image_2"
                                src="https://ide.code.fun/api/image?token=67bd4fee797f850011f9d0f7&name=1d578d9c68e297a3bd9d292291cede4a.png" />
                            <span class="self-start font_3 text_5 ml-541">ONLINE</span>
                        </div>
                    </div>
                    <span class="self-start font_3 text_7">智交乐学</span>
                    <div class="flex-col self-stretch group_7">
                        <div class="flex-col justify-start items-center self-start text-wrapper">
                            <span class="font_6 text_10">微信小程序更便捷</span>
                        </div>
                        <img class="shrink-0 self-end image_9"
                            src="https://ide.code.fun/api/image?token=67bd4fee797f850011f9d0f7&name=bed285a9d9deb698304536370cd508e3.png" />
                    </div>
                </div>
                <div class="flex-col section_2 pos w-full md:w-[56.42rem] ">
                    <div class="flex-col items-center">
                        <span class="font text_2">账号登录</span>
                        <div class="section_5 mt-11-5"></div>
                    </div>
                    <div class="flex-col group_4 mt-59">
                        <div class="flex-col">
                            <div class="flex-row items-center section_6">
                                <img class="image_3"
                                    src="https://ide.code.fun/api/image?token=67bd4fee797f850011f9d0f7&name=bb993d81c068ae7ec8f56cfd359cebe6.png" />
                                <span class="font_4 text_6 ml-8-5">请输入用户名/学校账号</span>
                            </div>
                            <div class="flex-row justify-between items-center section_7">
                                <div class="flex-row items-center">
                                    <img class="shrink-0 image_4"
                                        src="https://ide.code.fun/api/image?token=67bd4fee797f850011f9d0f7&name=182e12e34c5051f8e4ea89409933a1a1.png" />
                                    <span class="font_4 ml-14-5">请输入登录密码</span>
                                </div>
                                <img class="image_5"
                                    src="https://ide.code.fun/api/image?token=67bd4fee797f850011f9d0f7&name=c9989843dc58a595f7d2feb9fdd825e9.png" />
                            </div>
                            <div class="flex-row justify-between items-center section_8">
                                <div class="flex-row items-center">
                                    <img class="shrink-0 image_7"
                                        src="https://ide.code.fun/api/image?token=67bd4fee797f850011f9d0f7&name=c907568895c18d4d6459d22cccff90e5.png" />
                                    <span class="font_4 ml-11-5">请输入验证码</span>
                                </div>
                                <img class="image_6"
                                    src="https://ide.code.fun/api/image?token=67bd4fee797f850011f9d0f7&name=0cf910caf776df64b4dc1a7b25578f0b.png" />
                            </div>
                            <div class="flex-row justify-between items-center group_5">
                                <div class="flex-row items-center">
                                    <div class="shrink-0 group_6"></div>
                                    <span class="font_5 ml-9-5">自动登录</span>
                                </div>
                                <span class="font_5 text_8">忘记密码？</span>
                            </div>
                        </div>
                        <div class="flex-col mt-48-5">
                            <div class="flex-col justify-start items-center text-wrapper_2"><span class="font text_9">登
                                    录</span></div>
                            <div class="flex-row justify-between items-center group_8">
                                <div class="flex-row items-center">
                                    <img class="shrink-0 image_8"
                                        src="https://ide.code.fun/api/image?token=67bd4fee797f850011f9d0f7&name=f5f6c43e2fe5890f91ce237471867a89.png" />
                                    <span class="font_6 text_11 ml-11-5">微信登录</span>
                                </div>
                                <div class="flex-row items-center">
                                    <span class="font_6">账号注册</span>
                                    <div class="shrink-0 section_9"></div>
                                    <span class="font_6 text_12">找回密码</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    components: {},
    props: {},
    data() {
        return {};
    },
};
</script>

<style scoped lang="scss">
/************************************************************
** 请将全局样式拷贝到项目的全局 CSS 文件或者当前页面的顶部 **
** 否则页面将无法正常显示                                  **
************************************************************/

html {
    font-size: 16px;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
        'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
}

body * {
    box-sizing: border-box;
    flex-shrink: 0;
}

#app {
    width: 100vw;
    height: 100vh;
}

.flex-row {
    display: flex;
    flex-direction: row;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.justify-start {
    justify-content: flex-start;
}

.justify-end {
    justify-content: flex-end;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

.justify-evenly {
    justify-content: space-evenly;
}

.items-start {
    align-items: flex-start;
}

.items-end {
    align-items: flex-end;
}

.items-center {
    align-items: center;
}

.items-baseline {
    align-items: baseline;
}

.items-stretch {
    align-items: stretch;
}

.self-start {
    align-self: flex-start;
}

.self-end {
    align-self: flex-end;
}

.self-center {
    align-self: center;
}

.self-baseline {
    align-self: baseline;
}

.self-stretch {
    align-self: stretch;
}

.flex-1 {
    flex: 1 1 0%;
}

.flex-auto {
    flex: 1 1 auto;
}

.grow {
    flex-grow: 1;
}

.grow-0 {
    flex-grow: 0;
}

.shrink {
    flex-shrink: 1;
}

.shrink-0 {
    flex-shrink: 0;
}

.relative {
    position: relative;
}

.ml-2 {
    margin-left: 0.13rem;
}

.mt-2 {
    margin-top: 0.13rem;
}

.ml-4 {
    margin-left: 0.25rem;
}

.mt-4 {
    margin-top: 0.25rem;
}

.ml-6 {
    margin-left: 0.38rem;
}

.mt-6 {
    margin-top: 0.38rem;
}

.ml-8 {
    margin-left: 0.5rem;
}

.mt-8 {
    margin-top: 0.5rem;
}

.ml-10 {
    margin-left: 0.63rem;
}

.mt-10 {
    margin-top: 0.63rem;
}

.ml-12 {
    margin-left: 0.75rem;
}

.mt-12 {
    margin-top: 0.75rem;
}

.ml-14 {
    margin-left: 0.88rem;
}

.mt-14 {
    margin-top: 0.88rem;
}

.ml-16 {
    margin-left: 1rem;
}

.mt-16 {
    margin-top: 1rem;
}

.ml-18 {
    margin-left: 1.13rem;
}

.mt-18 {
    margin-top: 1.13rem;
}

.ml-20 {
    margin-left: 1.25rem;
}

.mt-20 {
    margin-top: 1.25rem;
}

.ml-22 {
    margin-left: 1.38rem;
}

.mt-22 {
    margin-top: 1.38rem;
}

.ml-24 {
    margin-left: 1.5rem;
}

.mt-24 {
    margin-top: 1.5rem;
}

.ml-26 {
    margin-left: 1.63rem;
}

.mt-26 {
    margin-top: 1.63rem;
}

.ml-28 {
    margin-left: 1.75rem;
}

.mt-28 {
    margin-top: 1.75rem;
}

.ml-30 {
    margin-left: 1.88rem;
}

.mt-30 {
    margin-top: 1.88rem;
}

.ml-32 {
    margin-left: 2rem;
}

.mt-32 {
    margin-top: 2rem;
}

.ml-34 {
    margin-left: 2.13rem;
}

.mt-34 {
    margin-top: 2.13rem;
}

.ml-36 {
    margin-left: 2.25rem;
}

.mt-36 {
    margin-top: 2.25rem;
}

.ml-38 {
    margin-left: 2.38rem;
}

.mt-38 {
    margin-top: 2.38rem;
}

.ml-40 {
    margin-left: 2.5rem;
}

.mt-40 {
    margin-top: 2.5rem;
}

.ml-42 {
    margin-left: 2.63rem;
}

.mt-42 {
    margin-top: 2.63rem;
}

.ml-44 {
    margin-left: 2.75rem;
}

.mt-44 {
    margin-top: 2.75rem;
}

.ml-46 {
    margin-left: 2.88rem;
}

.mt-46 {
    margin-top: 2.88rem;
}

.ml-48 {
    margin-left: 3rem;
}

.mt-48 {
    margin-top: 3rem;
}

.ml-50 {
    margin-left: 3.13rem;
}

.mt-50 {
    margin-top: 3.13rem;
}

.ml-52 {
    margin-left: 3.25rem;
}

.mt-52 {
    margin-top: 3.25rem;
}

.ml-54 {
    margin-left: 3.38rem;
}

.mt-54 {
    margin-top: 3.38rem;
}

.ml-56 {
    margin-left: 3.5rem;
}

.mt-56 {
    margin-top: 3.5rem;
}

.ml-58 {
    margin-left: 3.63rem;
}

.mt-58 {
    margin-top: 3.63rem;
}

.ml-60 {
    margin-left: 3.75rem;
}

.mt-60 {
    margin-top: 3.75rem;
}

.ml-62 {
    margin-left: 3.88rem;
}

.mt-62 {
    margin-top: 3.88rem;
}

.ml-64 {
    margin-left: 4rem;
}

.mt-64 {
    margin-top: 4rem;
}

.ml-66 {
    margin-left: 4.13rem;
}

.mt-66 {
    margin-top: 4.13rem;
}

.ml-68 {
    margin-left: 4.25rem;
}

.mt-68 {
    margin-top: 4.25rem;
}

.ml-70 {
    margin-left: 4.38rem;
}

.mt-70 {
    margin-top: 4.38rem;
}

.ml-72 {
    margin-left: 4.5rem;
}

.mt-72 {
    margin-top: 4.5rem;
}

.ml-74 {
    margin-left: 4.63rem;
}

.mt-74 {
    margin-top: 4.63rem;
}

.ml-76 {
    margin-left: 4.75rem;
}

.mt-76 {
    margin-top: 4.75rem;
}

.ml-78 {
    margin-left: 4.88rem;
}

.mt-78 {
    margin-top: 4.88rem;
}

.ml-80 {
    margin-left: 5rem;
}

.mt-80 {
    margin-top: 5rem;
}

.ml-82 {
    margin-left: 5.13rem;
}

.mt-82 {
    margin-top: 5.13rem;
}

.ml-84 {
    margin-left: 5.25rem;
}

.mt-84 {
    margin-top: 5.25rem;
}

.ml-86 {
    margin-left: 5.38rem;
}

.mt-86 {
    margin-top: 5.38rem;
}

.ml-88 {
    margin-left: 5.5rem;
}

.mt-88 {
    margin-top: 5.5rem;
}

.ml-90 {
    margin-left: 5.63rem;
}

.mt-90 {
    margin-top: 5.63rem;
}

.ml-92 {
    margin-left: 5.75rem;
}

.mt-92 {
    margin-top: 5.75rem;
}

.ml-94 {
    margin-left: 5.88rem;
}

.mt-94 {
    margin-top: 5.88rem;
}

.ml-96 {
    margin-left: 6rem;
}

.mt-96 {
    margin-top: 6rem;
}

.ml-98 {
    margin-left: 6.13rem;
}

.mt-98 {
    margin-top: 6.13rem;
}

.ml-100 {
    margin-left: 6.25rem;
}

.mt-100 {
    margin-top: 6.25rem;
}

.mt-9-5 {
    margin-top: 0.58rem;
}

.ml-541 {
    margin-left: 33.82rem;
}

.mt-11-5 {
    margin-top: 0.71rem;
}

.mt-59 {
    margin-top: 3.68rem;
}

.ml-8-5 {
    margin-left: 0.52rem;
}

.ml-14-5 {
    margin-left: 0.9rem;
}

.ml-9-5 {
    margin-left: 0.58rem;
}

.mt-48-5 {
    margin-top: 3.03rem;
}

.ml-11-5 {
    margin-left: 0.71rem;
}

.page {
    padding-top: 1.61rem;
    background-color: #ffffff;
    width: 100%;
    overflow: hidden; // 替换原来的 overflow-y: auto
    height: 100vh; // 确保占满视口高度

    .section_3 {
        padding-bottom: 0.52rem;
        background-image: url('https://ide.code.fun/api/image?token=67bd4fee797f850011f9d0f7&name=d913920f031222aaa5c3063f6538d9de.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        height: 100%; // 替换固定65.84rem
        min-height: 100vh; // 添加最小高度保

        .section {
            margin-top: -1.61rem;
            padding-top: 8.97rem;
            background-image: url('https://ide.code.fun/api/image?token=67bd4fee797f850011f9d0f7&name=32abaa87d37e9de1a193b570c3633e23.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            height: auto; // 改为自适应
            min-height: 100vh;
            position: relative; // 确保绝对定位元素包含

            .section_4 {
                padding: 2.52rem 8.2rem 11.17rem 8.2rem;
                background-image: url('https://ide.code.fun/api/image?token=67bd4fee797f850011f9d0f7&name=97de5155a7f1530376555691c5d4db40.png');
                background-size: 100% 100%;
                background-repeat: no-repeat;
                width: 90.11rem;

                .group {
                    padding-left: 7.29rem;
                    padding-right: 7.29rem;

                    .image {
                        width: 19.17rem;
                        height: 6rem;
                    }

                    .group_2 {
                        width: 39.57rem;

                        .text {
                            color: #161616;
                            font-size: 1.94rem;
                            font-family: MFLangQian_Noncommercial;
                            line-height: 1.94rem;
                            letter-spacing: 0.14rem;
                        }

                        .group_3 {
                            line-height: 0.97rem;

                            .font_2 {
                                font-size: 1.16rem;
                                font-family: 045;
                                line-height: 0.97rem;
                                color: #161616;
                            }

                            .text_3 {
                                font-size: 1.23rem;
                            }

                            .text_4 {
                                font-size: 1.23rem;
                                text-transform: uppercase;
                            }
                        }
                    }
                }

                .image_2 {
                    margin-bottom: 0.19rem;
                    width: 4.84rem;
                    height: 5.23rem;
                }

                .font_3 {
                    font-size: 1.42rem;
                    font-family: Microsoft YaHei;
                    line-height: 2.32rem;
                    font-weight: 700;
                    color: #fffefd;
                }

                .text_5 {
                    margin-top: 3.1rem;
                    text-shadow: 0.097rem 0.17rem 0.45rem #94b6fe59;
                    transform: rotate(-12deg);
                }

                .text_7 {
                    margin-left: 16.91rem;
                    margin-top: 5.29rem;
                    text-shadow: 0.097rem 0.17rem 0.45rem #94b6fe59;
                    transform: rotate(-10deg);
                }

                .group_7 {
                    margin-top: 5.68rem;
                    padding: 0 6.13rem;

                    .text-wrapper {
                        padding: 10.13rem 0 1.23rem;
                        border-radius: 1.29rem;
                        background-image: url('https://ide.code.fun/api/image?token=67bd4fee797f850011f9d0f7&name=1be2f3cbb1a5f8d339959156aa4bb64c.png');
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                        width: 10.78rem;

                        .text_10 {
                            color: #000000;
                            font-size: 0.97rem;
                            font-weight: 700;
                            line-height: 1.03rem;
                            letter-spacing: unset;
                        }
                    }

                    .image_9 {
                        margin-right: 10.07rem;
                        margin-top: -0.58rem;
                        width: 8.26rem;
                        height: 7.68rem;
                    }
                }
            }

            .section_2 {

                background-color: #ffffffc9;
                display: flex;
                justify-content: center;
                align-items: center;

                .font {
                    font-size: 1.55rem;
                    font-family: Microsoft YaHei;
                    letter-spacing: 0.12rem;
                }

                .text_2 {
                    color: #000000;
                    font-weight: 700;
                    line-height: 1.61rem;
                }

                .section_5 {
                    background-color: #166cff;
                    border-radius: 0.13rem;
                    width: 2.9rem;
                    height: 0.32rem;
                }

                .group_4 {
                    padding-left: 3.23rem;

                    .section_6 {
                        margin-right: 0.9rem;
                        padding: 0.84rem 1.04rem 0.96rem;
                        background-color: #f4f6fa;
                        border-radius: 0.32rem;
                        border: solid 0.064rem #dee3f0;

                        .image_3 {
                            width: 1.87rem;
                            height: 1.87rem;
                        }

                        .text_6 {
                            margin-right: 8.13rem;
                        }
                    }

                    .section_7 {
                        margin-right: 0.9rem;
                        margin-top: 1.74rem;
                        padding: 0.71rem 1.04rem 0.96rem;
                        background-color: #f4f6fa;
                        border-radius: 0.32rem;
                        border: solid 0.064rem #dee3f0;

                        .image_4 {
                            width: 1.48rem;
                            height: 2rem;
                        }

                        .image_5 {
                            width: 2rem;
                            height: 1.61rem;
                        }
                    }

                    .font_4 {
                        font-size: 1.16rem;
                        font-family: Microsoft YaHei;
                        letter-spacing: 0.087rem;
                        line-height: 1.23rem;
                        color: #c5c8ce;
                    }

                    .section_8 {
                        margin-right: 0.9rem;
                        margin-top: 1.87rem;
                        padding: 0.13rem 0.25rem 0.25rem 1.04rem;
                        background-color: #f4f6fa;
                        border-radius: 0.32rem;
                        border: solid 0.064rem #dee3f0;

                        .image_7 {
                            width: 1.68rem;
                            height: 1.81rem;
                        }

                        .image_6 {
                            border-radius: 0.32rem;
                            width: 8.33rem;
                            height: 3.29rem;
                        }
                    }

                    .group_5 {
                        padding-top: 1.36rem;

                        .group_6 {
                            border-radius: 0.13rem;
                            width: 1.23rem;
                            height: 1.23rem;
                            border: solid 0.13rem #e5e5e5;
                        }

                        .font_5 {
                            font-size: 1.03rem;
                            font-family: Microsoft YaHei;
                            letter-spacing: 0.077rem;
                            line-height: 1.1rem;
                            color: #c5c8ce;
                        }

                        .text_8 {
                            margin-right: 0.71rem;
                        }
                    }

                    .text-wrapper_2 {
                        margin-right: 0.9rem;
                        padding: 1.23rem 0 1.16rem;
                        background-color: #166cff;
                        background-image: linear-gradient(96deg, #0951e3 0%, #2ecbff 100%);
                        border-radius: 0.32rem;
                        width: 25.82rem;

                        .text_9 {
                            color: #ffffff;
                            line-height: 1.48rem;
                        }
                    }

                    .group_8 {
                        padding-top: 2.07rem;

                        .image_8 {
                            width: 2.65rem;
                            height: 2.65rem;
                        }

                        .text_11 {
                            line-height: 1.1rem;
                        }

                        .section_9 {
                            margin-left: 0.13rem;
                            background-color: #c9c9c9;
                            width: 0.13rem;
                            height: 1.23rem;
                        }

                        .text_12 {
                            margin-left: 1.16rem;
                        }
                    }
                }
            }

            .pos {
                position: absolute;
                right: 0;
                top: 0rem;
                height: 100vh;
            }

            .font_6 {
                font-size: 1.03rem;
                font-family: Microsoft YaHei;
                letter-spacing: 0.077rem;
                line-height: 0.97rem;
                color: #1b1b1b;
            }
        }
    }
}
</style>